<template>
	<view class="activityDetail">
		<uv-swiper height="190" :autoplay="false" indicator indicatorMode="dot" :list="info.imgUrls"></uv-swiper>
		<view class="absolute-box">
			<view class="container-box">
				<view class="price-box">
					<view class="activeColor">￥</view>
					<view class="activeColor real-price-text">{{ info.retailPrice }}</view>
					<view class="tips-color-box left-space-box">￥</view>
					<view class="tips-color-box" style="text-decoration: line-through">
						{{ info.channelPrice }}
					</view>
				</view>
				<view class="route-title-box">{{ info.title }}</view>
				<view class="flex-box tags-container-box">
					<view class="tags-box" v-for="(item, index) in info.routeTags" :key="index">
						{{ item }}
					</view>
				</view>
				<view class="campPeriod-box">
					<view class="campPeriod-title">营期</view>
					<view class="campPeriod-content-box">
						<scroll-view scroll-x style="white-space: nowrap" :show-scrollbar="false">
							<view :class="['flex-box', info.campPeriodList?.length ? '' : 'center-box']">
								<view v-if="info.campPeriodList?.length" class="campPeriod-item-box" v-for="(item, index) in info.campPeriodList" :key="index">
									<view class="time-box">{{ format(item.campPeriodStartDate) }} - {{ format(item.campPeriodEndDate) }}</view>
									<view class="flex-box center-box" @tap="handleChangeStatus(item)">
										<view :class="['campComplexStatus-box', getComplexStatus(item.campComplexStatus)]">{{ getDictName(item.campComplexStatus) }}</view>
									</view>
								</view>
								<view v-else>
									<view class="noData">
										<image :src="noData" mode="aspectFit" />
									</view>
									<view class="noData-text">暂无营期</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="campPeriod-box">
					<view class="campPeriod-title">图文详情</view>
					<view style="padding: 20rpx 0">
						<!-- <uv-parse :content="info.detail"></uv-parse> -->
						<view v-html="info.detail"></view>
					</view>
				</view>
			</view>
			<view class="flex-box operate-box">
				<view class="add-box auto-box" @tap.stop="handleNext">立即报名</view>
			</view>
		</view>
		<uni-popup ref="camperPopup" type="bottom" background-color="#fff">
			<view class="camperPopup-box">
				<view class="camperPopup-box-head white-bg">
					<view class="campPeriod-title">选择营期</view>

					<view
						v-for="(item, index) in info.campPeriodList"
						class="campComplexStatus-box tips-color-box"
						:class="{ active: item.campId == orderFormData.campId }"
						:key="index"
						@tap="handleChangeStatus(item)"
					>
						<span :style="{ color: item.campComplexStatus == '1' ? '' : 'rgba(212, 48, 48, 1)' }">
							{{ getDictName(item.campComplexStatus) }} {{ format(item.campPeriodStartDate) }} - {{ format(item.campPeriodEndDate) }}
						</span>
					</view>
					<view class="flex-box center-box">
						<view class="arrowDown">
							<image :src="arrowDown" mode="aspectFit" />
						</view>
					</view>
				</view>
				<view class="space-box"></view>
				<view class="white-bg info-box">
					<view class="flex-box between-box form-item-box">
						<view class="campPeriod-title">报名数量</view>
						<view class="flex-box">
							<view class="add-num-box">{{ orderStore.selectCamperList?.length }}</view>
						</view>
					</view>
					<view class="flex-box between-box form-item-box">
						<view class="campPeriod-title">营员信息</view>
						<view class="flex-box" style="flex: 1" @tap.stop="selectCamper">
							<view class="campPeriod-title" style="flex: 1; text-align: right">
								{{ camperTitle }}
							</view>
							<view class="arrowRightIcon">
								<image :src="arrowRightIcon" mode="aspectFit" />
							</view>
						</view>
					</view>
					<view class="flex-box between-box form-item-box">
						<view class="campPeriod-title">启程集合地</view>
						<view class="flex-box" style="flex: 1" @tap.stop="handleSelectResort">
							<view class="campPeriod-title" style="flex: 1; text-align: right">
								{{ orderStore.campMeetLocation?.locationName || '' }} {{ orderStore.campMeetLocation?.meetTimeDesc || '' }}
							</view>
							<view class="arrowRightIcon">
								<image :src="arrowRightIcon" mode="aspectFit" />
							</view>
						</view>
					</view>
				</view>
				<view class="space-box"></view>
				<view class="white-bg info-box">
					<view>
						<view class="flex-box checked-container-box form-item-box" @tap.stop="(_) => (isCheck = !isCheck)">
							<view :class="['select-box', isCheck ? 'select-active' : 'default-select']">
								<uv-icon v-if="isCheck" name="checkbox-mark" color="#fff" size="14"></uv-icon>
							</view>
							<view class="tips-box">
								<text>已阅读并同意</text>
								<text class="tips-active" @tap="openAgreement">《入营须知，可点击跳转至详情页》</text>
							</view>
						</view>
					</view>
				</view>
				<view class="space-box"></view>
				<view class="white-bg">
					<view class="flex-box between-box pay-container-box">
						<view class="price-box" style="flex: 1">
							<view class="tips-color-box mini-text-box">实付金额：</view>
							<view class="tips-color-box"></view>
							<view class="activeColor">￥</view>
							<view class="activeColor real-price-text">{{ info.retailPrice * orderStore.selectCamperList?.length }}</view>
						</view>
						<button style="background-color: rgba(67, 207, 124, 1)" class="pay-btn-box" type="primary" :loading="loading" @tap="handlePay">前往支付</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, nextTick, watch, computed } from 'vue';
import noData from '@/asstes/images/home/noData.png';
import arrowDown from '@/asstes/images/home/arrowDown.png';
import arrowRightIcon from '@/asstes/images/mine/arrowRightIcon.png';
import { onLoad, onUnload } from '@dcloudio/uni-app';
import HomeAPI from '@/api/home/api.ts';
import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js';
import { useOrderStore } from '@/stores/order';
const orderStore = useOrderStore();
const camperPopup = ref(null);
const loading = ref(false);
const orderFormData = ref({
	type: 1, //现金支付 2 兑换券
	routeId: null, //路线id
	campId: null, //营队id
	camperIds: [], //营员id
	campMeetLocationId: null, //集合地id
	payAmount: 0 //支付金额
});
let isCheck = ref(false);
// 詳情信息
const info = ref({});

const camperTitle = computed(() => {
	if (orderStore.selectCamperList?.length > 0) {
		return `${orderStore.selectCamperList[0]?.userName} ${orderStore.selectCamperList?.length > 1 ? '等' : ''} ${orderStore.selectCamperList?.length}人`;
	} else {
		return '';
	}
});
/**
 * @description 获取营期状态样式
 * @param status 营期状态
 */
function getComplexStatus(status) {
	switch (status) {
		case 1:
			return 'activeColor-box';
		case 2:
			return 'errorColor-box';
	}
}

onLoad((e) => {
	//页面初始化清一次
	clearPiniaData();
	let routeId = e.routeId;
	HomeAPI.getRoute(routeId).then(({ data }) => {
		nextTick(() => {
			info.value = data || {};
			orderFormData.value.routeId = data.routeId;
		});
	});
});

watch(
	[() => orderStore.selectCamperList, () => orderStore.campMeetLocation],
	() => {
		orderFormData.value.camperIds = orderStore.selectCamperList.map((item) => item.id);
		orderFormData.value.campMeetLocationId = orderStore.campMeetLocation?.id || null;
	},
	{ deep: true }
);

onUnload(() => {
	clearPiniaData();
});

function clearPiniaData() {
	//清除pinia 选中的数据  --营员和 集合地
	orderStore.clearData();
}

function handleChangeStatus(camper) {
	if (camper.campComplexStatus != '1') {
		uni.showToast({
			title: getDictName(camper.campComplexStatus) + ',请选择其他营期',
			duration: 2000,
			icon: 'none'
		});
	} else {
		orderFormData.value.campId = camper.campId;
		orderStore.campMeetLocation = {};
		camperPopup.value.open();
	}
}

/**
 * @description 立即报名
 */
function handleNext() {
	camperPopup.value.open();
}
/**
 * @description 选择营员
 */
function selectCamper() {
	uni.navigateTo({
		url: '/pages/myCamper/selectCamper'
	});
}
/**
 * @description 选择集合地
 */
function handleSelectResort() {
	let data = orderFormData.value;
	if (!data.campId) {
		uni.showToast({
			title: '请选择营期',
			duration: 2000,
			icon: 'none'
		});
	} else {
		orderStore.campId = data.campId;
		uni.navigateTo({
			url: '/pages/myCamper/selectResort'
		});
	}
}

function getDictName(code) {
	let name = '';
	uni.getStorageSync('dict').forEach((item) => {
		if (item.typeCode === 'campCondition') {
			name = item.options.find((obj) => obj.value == code)?.label;
		}
	});
	return name;
}

function format(date) {
	return dayjs(date).format('MM月DD日');
}

function handlePay() {
	let data = orderFormData.value;
	if (!data.campId) {
		uni.showToast({
			title: '请选择营期',
			duration: 2000,
			icon: 'none'
		});
	} else if (data.camperIds?.length == 0) {
		uni.showToast({
			title: '请选择营员',
			duration: 2000,
			icon: 'none'
		});
	} else if (!data.campMeetLocationId) {
		uni.showToast({
			title: '请选择集合地',
			duration: 2000,
			icon: 'none'
		});
	} else if (!isCheck.value) {
		uni.showToast({
			title: '请阅读并勾选入营须知',
			duration: 2000,
			icon: 'none'
		});
	} else {
		loading.value = true;
		orderFormData.value.payAmount = info.value.retailPrice * orderStore.selectCamperList?.length;
		HomeAPI.createOrder(orderFormData.value).then(({ data }) => {
			uni.showToast({
				title: '订单保存成功',
				duration: 2000,
				icon: 'none'
			});
			//跳转到订单详情页面
			uni.redirectTo({
				url: '/pages/order/detail?orderId=' + data
			});
			loading.value = false;
		});
	}
}

function openAgreement() {
	uni.navigateTo({
		url: '/pages/home/agreement'
	});
}
</script>

<style lang="scss" scoped>
.activityDetail {
	position: relative;
	.absolute-box {
		top: 360rpx;
		position: absolute;
	}
	.activeColor {
		color: #43cf7c;
	}

	.real-price-text {
		font-weight: 700;
		font-size: 36rpx;
	}
	.container-box {
		border-radius: 38rpx 38rpx 0rpx 0rpx;
		background: rgb(248, 248, 248);
		padding: 20rpx 30rpx;
		padding-bottom: 200rpx;
		width: calc(100vw - 60rpx);
		font-size: 24rpx;

		.left-space-box {
			margin-left: 16rpx;
		}

		.route-title-box {
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			color: #000;
			font-size: 30rpx;
			margin-top: 16rpx;
			margin-bottom: 6rpx;
		}

		.tags-container-box {
			flex-wrap: wrap;

			.tags-box {
				background: rgba(67, 207, 124, 0.18);
				height: 37rpx;
				line-height: 37rpx;
				padding: 0 12rpx;
				color: #43cf7c;
				margin-top: 24rpx;
				font-size: 24rpx;
				margin-right: 20rpx;
			}
		}

		.campPeriod-box {
			border-radius: 10rpx;
			background: rgba(255, 255, 255, 1);
			padding: 13rpx 20rpx 13rpx 20rpx;
			margin-top: 30rpx;

			.campPeriod-item-box {
				border-radius: 10rpx;
				background: rgba(246, 246, 246, 1);
				padding: 25rpx 37rpx 34rpx 37rpx;
				margin-right: 30rpx;
			}

			.time-box {
				font-size: 27rpx;
				color: rgba(128, 128, 128, 1);
			}
			.campPeriod-content-box {
				padding-top: 12rpx;
			}

			.activeColor-box {
				color: #43cf7c;
				border: solid 1rpx #43cf7c;
			}
			.errorColor-box {
				color: rgba(212, 48, 48, 1);
				border: solid 1rpx rgba(212, 48, 48, 1);
			}
			.noData {
				width: 214rpx;
				height: 160rpx;
				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
			.noData-text {
				font-size: 27rpx;
				font-weight: 500;
				color: rgba(166, 166, 166, 1);
				text-align: center;
				padding-bottom: 24rpx;
			}
			.previewImage {
				margin-top: 17rpx;
			}
		}
	}
	.operate-box {
		justify-content: space-around;
		background: #fff;
		padding: 17rpx 0;
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 99;
	}

	.add-box {
		border-radius: 10rpx;
		background: rgba(67, 207, 124, 1);
		font-size: 32rpx;
		color: #fff;
		padding: 22rpx 42rpx;
		margin: 0 94rpx;
		text-align: center;
	}
}
.price-box {
	display: flex;
	align-items: baseline;
}
.campComplexStatus-box {
	height: 49rpx;
	line-height: 49rpx;
	padding: 0 25rpx;
	border-radius: 39rpx;
	font-size: 22rpx;
	margin-top: 15rpx;
	border: 2rpx solid rgba(229, 229, 229, 1);
	display: inline-block;
}
.tips-color-box {
	color: rgba(166, 166, 166, 1);
}
.camperPopup-box {
	background: #fff;
	.camperPopup-box-head {
		padding: 50rpx 30rpx 0 30rpx;
		border-radius: 20rpx 20rpx 0px 0px;
	}
	.arrowDown {
		width: 27rpx;
		height: 15rpx;
		margin: 6rpx 0;
		image {
			width: 100%;
			height: 100%;
			display: block;
		}
	}
	.active {
		border: 1.92pxsolidrgba (67, 207, 124, 1);
		color: rgba(67, 207, 124, 1);
	}
}
.center-box {
	justify-content: center;
}
.space-box {
	height: 12rpx;
	background: rgba(204, 204, 204, 0.14);
}
.info-box {
	padding: 0rpx 30rpx 58rpx 30rpx;
}
.between-box {
	justify-content: space-between;
}
.campPeriod-title {
	font-size: 28rpx;
}
.form-item-box {
	padding-top: 38rpx;
}
.add-num-box {
	padding: 5rpx 12rpx;
	background: rgba(243, 244, 246, 1);
	font-size: 28rpx;
	margin-left: 4rpx;
}
.arrowRightIcon {
	width: 30rpx;
	height: 30rpx;
	image {
		width: 100%;
		height: 100%;
		display: block;
	}
}
.checked-container-box {
	display: flex;
	align-items: center;
}

.tips-box {
	font-size: 32rpx;
	color: rgba(128, 128, 128, 1);
}

.tips-active {
	color: rgba(42, 130, 228, 1);
}

.select-box {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	color: #fff;
	width: 60rpx;
	height: 50rpx;
	margin-right: 10rpx;
}

.select-active {
	background: rgba(67, 207, 124, 1);
	border-color: rgba(67, 207, 124, 1);
}

.default-select {
	background-color: rgb(241, 241, 241, 0.8);
	color: rgba(241, 241, 241);
}
.mini-text-box {
	font-size: 24rpx;
}
.pay-btn-box {
	margin-top: 10rpx;
}
.pay-container-box {
	padding: 10rpx 30rpx 30rpx 30rpx;
}
/* 隐藏Webkit内核浏览器（如Chrome和Safari）的滚动条 */
</style>
